<template>
	<view>
		<view class="equities_view">
			<view class="row-between" style="margin-bottom: 26upx;">
				<view class="my_equities">
					<text>我的权益分</text>
					<image :src="moneyShow? '/static/assets/kejian.png' : '/static/assets/bukejian.png'" :style="{'width': '32upx','height': moneyShow ? '23upx' : '28upx','margin-left': '13upx'}" @click="moneyShow = !moneyShow"/>
				</view>
				<navigator url="/pagesAccount/myAccount/IntegralDetails/IntegralDetails" style="font-size: 24upx;color: #FFFFFF;"
				 hover-class="none">
					详情
					<uni-icons style="font-size: 24upx; color: #FFFFFF;margin-left: 11upx;" type="arrowright"></uni-icons>
				</navigator>
			</view>

			<view style="font-size: 40upx;font-weight: bold;color: #FFFFFF;margin-bottom: 40upx;">{{moneyShow ? myInterestText : '******'}}</view>

			<view class="" style="width: 490upx;height: 1upx;background: #FFFFFF;opacity: 0.3;margin-bottom: 32upx;"></view>

			<view class="row-div">
				<navigator url="/pagesAccount/transfer" class="column-between" hover-class="none">
					<image class="equities_image" src="../../static/assets/zhuanzhang.png" />
					<text class="equities_text">转账</text>
				</navigator>
				<view class="border_view"></view>
				<navigator url="/pagesAccount/acceptPay" class="column-between" hover-class="none">
					<image class="equities_image" src="../../static/assets/shouzhang.png" />
					<text class="equities_text">收付账</text>
				</navigator>
				<view class="border_view"></view>

				<navigator url="/pagesAccount/withdrawal" class="column-between" style="z-index: 1;" hover-class="none">
					<image class="equities_image" src="../../static/assets/duixian.png" />
					<text class="equities_text">兑现</text>
				</navigator>
			</view>
		</view>

		<view class="row-between" style="background-color: #FFFFFF; border-radius: 10upx; padding: 23upx 36upx;margin-bottom: 20upx;">
			<view style="padding: 17upx 0upx;">
				<view style="font-size: 24upx;color: #333333;margin-bottom: 26upx;">昨日权益分</view>
				<view style="font-size: 40upx;font-weight: bold;color: #333333;">{{moneyShow ? yesterdayInterestText : '******'}}</view>
			</view>
			<image src="../../static/assets/yesterday.png" style="width: 125upx;height: 116upx;" />
		</view>

		<view class="" style="background-color: #FFFFFF;border-radius: 10upx;margin-bottom: 20upx;">
			<view class="row-between transaction-record">
				<view class="row-start headline-view">交易记录</view>
				<view class="row-between" style="padding:0 38upx;height: 100%;">
					<!-- 	类型 10 全部 20 转入 30 转出 -->
					<text :class="['column-div','tag_text',transactionActive == '10' ? 'tag-text-active': '']" style="margin-right: 64upx;"
					 @click="transaction('10')">全部</text>
					 <text :class="['column-div','tag_text',transactionActive == '20' ? 'tag-text-active': '']" style="margin-right: 64upx;"
					 @click="transaction('20')">转入</text>
					  <text :class="['column-div','tag_text',transactionActive == '30' ? 'tag-text-active': '']" @click="transaction('30')">转出</text>
				</view>
			</view>

			<view v-for=" (item,index) in tradingRecordData" :key="item.time + index" class="row-between" style="padding: 30upx; border-bottom: 1upx solid #EEEEEE;">
				<view class="column-between" style="align-items: flex-start;">
					<text style="font-size: 26upx; color: #333333;margin-bottom: 18upx;">{{item.number}}</text>
					<text style="font-size: 22upx; color: #999999;">{{item.time}}</text>
				</view>
				<!-- 收入支出标识 10 收入 20 转出 -->
				<view :style="{fontSize: '26upx',fontWeight: '500', color: item.ioFlag == '10' ? '#FE5E49' : '#666666'}">{{ item.ioFlag == '10' ? '+ ':'- '}}{{item.equityPoints}}权益分</view>
			</view>
		</view>
		
		<g-empty v-if="!tradingRecordData.length"></g-empty>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 我的权益分
				myInterestText: 0,
				// 昨日权益分
				yesterdayInterestText: '',
				// 交易记录
				tradingRecordData:[],
				page: 1,
				// 总条数
				totalPageNo:0,
				moneyShow: false,
				transactionActive: '10'
			}
		},
		
		mounted(){
			this.infoRequest()
		},
		methods: {
			transaction(str) {
				this.transactionActive != str ? this.transactionActive = str : '',
				this.tradingRecordData=[]
				this.page = 0
				this.getTradingRecord(str)
			},
			// 初始化请求
			async infoRequest() {
				this.$api.showLoading()
				this.tradingRecordData=[],
				this.page= 0,
				this.totalPageNo=0,
				this.moneyShow=false,
				await this.getMyInterest()
				await this.getYesterdayInterest()
				await this.getTradingRecord()
				this.$api.hideLoading()
			},
			// 我的权益分
			getMyInterest () {
				return this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/myEquity',
					method: 'POST',
					success: (res) => this.myInterestText = res.data.response.point.toFixed(2)+'分 = '+res.data.response.dollar.toFixed(2)+'元'
				});
			},
			// 昨日权益分
			getYesterdayInterest () {
				return this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/yesterdayEquity',
					method: 'POST',
					success: (res) => this.yesterdayInterestText = res.data.response.point.toFixed(2) +'分 = '+res.data.response.dollar.toFixed(2)+'元'
				});
			},
			// 交易记录 tradingRecordData
			getTradingRecord (str) {
				this.page += 1
				str ? this.$api.showLoading() : ''
				return this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/transactionRecord',
					method: 'POST',
					data: {
						type: this.transactionActive,
						pageNum: this.page,
						pageSize: 10
					},
					success: (res) => {
						let arr = res.data.response.results || [];
						arr.forEach(item => {
							item.time = this.timeFormat(item.time)
						})
						this.tradingRecordData = this.tradingRecordData.concat(arr)
						this.totalPageNo = res.data.response.pages
						this.$emit("getTotalPageNo",this.totalPageNo,this.page)
					},
					complate: () => (uni.stopPullDownRefresh(),this.$api.hideLoading())
				});
			},
			timeFormat(time){
				let data = new Date(time - 0)
				let month = data.getMonth() + 1 > 10 ? data.getMonth() + 1 : `0${data.getMonth() + 1}`
				let day = data.getDay() > 10 ? data.getDay() : `0${data.getDay()}`
				return `${data.getFullYear()}.${month}.${day} ${data.getHours()}:${data.getSeconds()}`
			},
		}
	}
</script>

<style scoped lang="scss">
	.transaction-record {
		position: relative;
		height: 75upx;
		border-bottom: 1px solid #DBDBDB;
		// &::before {
		// 	content: " ";
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 100%;
		// 	height: 10upx;
		// 	border-top: 1px solid #DBDBDB;
		// 	background: #FFFFFF;
		// }
		.tag_text{
			height: 100%;
		}
		.tag-text-active {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&::after {
				content: " ";
				width: 0;
				height: 0;
				border-right: 6px solid transparent;
				border-left: 6px solid transparent;
				border-bottom: 6px solid #DBDBDB;
				position: absolute;
				bottom: -1px;
			}

			&::before {
				content: " ";
				width: 0;
				height: 0;
				position: absolute;
				bottom: -1px;
				border-right: 5px solid transparent;
				border-left: 5px solid transparent;
				border-bottom: 5px solid #FFFFFF;
				z-index: 1;
			}
		}

		.tag_text {
			font-size: 24upx;
			color: #333333;
			position: relative;
		}
	}

	.equities_view {
		background: linear-gradient(-30deg, #EC2400 0%, #FF5A00 100%);
		border-radius: 10upx;
		padding: 30upx;
		position: relative;
		margin-bottom: 20upx;

		&::after {
			content: " ";
			width: 167upx;
			height: 167upx;
			background-image: url(../../static/assets/quanyifen.png);
			background-size: 100%;
			position: absolute;
			bottom: 10upx;
			right: 15upx;
		}
	}

	.my_equities {
		font-size: 24upx;
		font-weight: 500;
		color: #FFFFFF;

		&::after {
			content: " ";
			background-image: url(../../static/assets/kejian.png);
			background-size: 100%;
			width: 32upx;
			height: 23upx;
		}
	}

	.equities_image {
		width: 52upx;
		height: 52upx;
	}

	.equities_text {
		font-size: 26upx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.border_view {
		margin-left: 88upx;
		margin-right: 88upx;
		width: 4upx;
		height: 80upx;
		background: #FFFFFF;
		opacity: 0.3;
	}

	.headline-view {
		font-size: 26upx;
		color: #333333;
		font-weight: bold;

		&::before {
			content: " ";
			width: 6upx;
			height: 26upx;
			background: #DA3214;
			border-radius: 2px;
			margin-right: 17upx;
		}
	}

	.border_top::after {
		width: 0;
		height: 0;
		/* border-right: 10upx dashed transparent;
		border-left: 10upx dashed transparent;
		border-bottom: 10upx solid #DBDBDB; */
		border-top: 10upx solid #DBDBDB;
		border-bottom: 10upx solid transparent;
		border-left: 10upx solid transparent;
		border-right: 10upx solid transparent;
	}
</style>
